<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">

<head>
    <title th:text="#{cas.oauth.confirm.pagetitle}"></title>
</head>

<body id="cas">
<div layout:fragment="content" class="banner mdc-card card p-4 m-auto w-lg-66">
    <h1 th:text="#{screen.oidc.confirm.ciba.header}"/>

    <div class="d-flex flex-column align-items-center mb-2">
        <img th:src="${registeredService.logo}" th:if="${registeredService.logo}"/>
        <h2 th:text="${registeredService.name}"/>
        <p th:text="${registeredService.description}"/>
    </div>

    <div id="scopes" th:unless="${#sets.isEmpty(cibaRequest.scopes)}">
        <h3 class="border-bottom bg-primary p-2" th:text="#{screen.oidc.confirm.scopes}"/>
        <p th:text="#{screen.oidc.confirm.asksinfo}"/>

        <div th:each="scope : ${cibaRequest.scopes}">
            <span th:id="${scope}">
                <i class="mdi mdi-cog fas fa-cog" aria-hidden="true"></i>
                <strong><code th:text="${scope}"/></strong>
                <p th:utext="#{screen.oidc.confirm.scope.__${scope}__}"/>
            </span>
        </div>
    </div>

    <div th:if="${registeredService.informationUrl}" class="my-2">
        <i class="mdi mdi-comment fas fa-comment" aria-hidden="true"></i>
        <a id="informationUrl" th:href="${registeredService.informationUrl}"
           th:utext="#{screen.oidc.confirm.infourl(${registeredService.name})}"/>
    </div>
    <div th:if="${registeredService.privacyUrl}" class="my-2">
        <i class="mdi mdi-eye fas fa-eye" aria-hidden="true"></i>
        <a id="privacyUrl" th:href="${registeredService.privacyUrl}"
           th:utext="#{screen.oidc.confirm.privacyurl(${registeredService.name})}"/>
    </div>

    <span th:if="${bindingMessage}">
        <h3 class="strong border-bottom pb-2 mt-4" th:utext="#{screen.oidc.confirm.bindingmessage.header}">Binding Message</h3>
        <sub th:text="#{screen.oidc.confirm.bindingmessage.description}" />
        <pre th:text="${bindingMessage}" />
    </span>

    <div class="d-flex">
        <form method="post" id="fm1">
            <section class="cas-field my-3 mdc-input-group form-group">
                <div class="mdc-input-group-field mdc-input-group-field-append">
                    <div class="d-flex caps-check">
                        <label for="userCode" class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon control-label">
                            <span class="mdc-notched-outline">
                                <span class="mdc-notched-outline__leading"></span>
                                <span class="mdc-notched-outline__notch">
                                    <span class="mdc-floating-label" th:utext="#{screen.oidc.confirm.usercode.header}">User Code</span>
                                </span>
                                <span class="mdc-notched-outline__trailing"></span>
                            </span>
                            <input class="mdc-text-field__input form-control pwd"
                                   type="password"
                                   name="userCode"
                                   id="userCode"
                                   size="50"
                                   autocomplete="one-time-code" required/>
                        </label>

                        <button class="reveal-password mdc-button mdc-button--raised mdc-input-group-append mdc-icon-button"
                                tabindex="-1"
                                type="button" th:title="#{screen.pm.password.toggle}">
                            <i class="mdi mdi-eye reveal-password-icon" aria-hidden="true"></i>
                        </button>
                    </div>
                    <div class="mdc-text-field-helper-line caps-warn">
                        <p class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg text-danger">
                            <span th:utext="#{screen.capslock.on}"/>
                        </p>
                    </div>
                    <sub th:text="#{screen.oidc.confirm.usercode.description}" />
                </div>
            </section>

            <div class="d-flex">
                <button id="confirmButton" class="mdc-button mdc-button--raised me-2" accesskey="c">
                    <span class="mdc-button__label" th:text="#{screen.welcome.button.confirm}">Confirm</span>
                </button>
            </div>
            <input type="hidden" id="csrfToken" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
            <input type="hidden" name="cibaRequestId" th:value="${cibaRequest.id}" />
        </form>
    </div>
</div>
</body>
</html>
